<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<link rel="stylesheet" type="text/css" href="css/core.css"/>
	    <style>

    #slides {
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:5px;
    }

   
    a.slidesjs-next {
      margin-right:10px;
      background-position: -12px 0;
    }

    a:hover.slidesjs-next {
      background-position: -12px -18px;
    }

    a.slidesjs-previous {
      background-position: 0 0;
    }

    a:hover.slidesjs-previous {
      background-position: 0 -18px;
    }

    a.slidesjs-play {
	display:none;
      width:15px;
      background-position: -25px 0;
    }

    a:hover.slidesjs-play {
	display:none;
      background-position: -25px -18px;
    }

    a.slidesjs-stop {
	 display:none;
      width:18px;
      background-position: -41px 0;
    }

    a:hover.slidesjs-stop {
	  display:none;
      background-position: -41px -18px;
    }

    .slidesjs-pagination {
     margin:10px auto 0;
	width:100px;
    }

    .slidesjs-pagination li {
     float:left;
	 margin:0 1px;
	list-style:none;
	display: none;
    }

    .slidesjs-pagination li a {
		display:block;
		width:12px;
		height:0;
		padding-top:13px;
		background-image:url(img/pagination.png);
		background-position:0 0;
		float:left;
		overflow:hidden;
	
     
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
     background-position:0 -12px;
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }
  </style>
	</head>
	<body>
		<header class="jw-header">
			<nav class="jw-header-nav">
				<div class="jw-hide-nav">	
					<div class="jw-hide-nav-middle">
						<img width="40px" height="40px" src="img/XL.png" />
					</div>
					
				</div>
				<ul class="jh-nav-list">
					<li class="jh-nav-logo">
						
					</li>
					<li>
						<a href="index1.html">WHAT WE DO</a>
					</li>
					<li>
						<a href="index2.html">OUR WORK</a>
					</li>
					<li>
						<a href="index3.html">CLIENTS</a>
					</li>
					<li>
						<a href="index4.html">TEAM</a>
					</li>
					<li>
						<a href="index5.html">OFFICES</a>
					</li>
					<li>
						<a href="index6.html">EXPERIMANTES</a>
					</li>
															
				</ul>
			</nav>
		</header>
		<section class="i6-content">
			<ul class="i6-main-list">
				<div class="world"><li class="red-world"><a href=""><h1>Sunglass Factory</h1></a></li>
				<li><a href=""><p>qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,sed quia non numquam eius modi tempora incidunt ut labore</p></a></li>
				<li><a href=""><p>aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis</p></a></li>
				</div>
				<li>
					<div>
						<div class="four-img">
							 <div class="container" style="width: 520px; height: 208px; position: relative; top: 28px;left: 415px; z-index: 100;">
								<div id="slides">
								  <img src="img/example-slide-1.jpg" >
								  <img src="img/example-slide-2.jpg" >
								  <img src="img/example-slide-3.jpg" >
								  <img src="img/example-slide-4.jpg" >
								</div>
							 </div>
						</div>
						
						<a href="">
							<img src="img/i6-1.png"/ style="width: 1349px;height: 644px; " class="big-img">
						</a>
						
					</div>
				</li>
				
			</ul>
			
		</section>
		<div class="foorter">
			<div class="copyright">
				Copyright © 2013 VISUAL Box. All Right Reserved
			</div>
			<div class="copyright2">
				<img src="img/02-01_07.png"/>
			</div>
		</div>
		<div class="nav-right">
			<div><img src="img/DH.png"/></div>
			<div><img src="img/YJ2.png"/></div>
			<div><img src="img/freng.png"/></div>
			<div><img src="img/come.png"/></div>
		</div>
		<script type="text/javascript" src="vendor/jquery-1.9.1.min.js" ></script>
    <script type="text/javascript" src="vendor/jquery.slides.js" ></script>
  <script>
    $(function() {
      $('#slides').slidesjs({
        width: 520,
        height: 295,
		 navigation: {
        active: false,
          effect: "slide"
    },
        play: {
          active: true,
          auto: true,
          interval: 3000,
          swap: false
        }
      });
    });
  </script>
	</body>
</html>	